<template>
  <div class="storelist">
    <div class="storelistcotainer">
      <div class="storelist-item" v-for="item in storelist" :key="item.title">
        <div class="left">
          <img :src="item.url" />
        </div>
        <div class="right">
          <h1>{{item.title}}</h1>
          <img src="../../images/Shape未选.png" />
          <img src="../../images/Shape未选.png" />
          <img src="../../images/Shape未选.png" />
          <img src="../../images/Shape未选.png" />
          <img src="../../images/Shape未选.png" />
          <span>5.0</span>
          <span class="juli">{{item.distance}}</span>
          <h4>成交量{{item.count}}单</h4>
          <h3>{{item.address}}</h3>
        </div>
      </div>
    </div>
    <div class="storelistcotainer-nodata" v-show="flag">
      <img src="../../images/插画.png" />
      <p>当前城市暂无门店~</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      storelist: [],
      district: "全城",
      service: "全部",
      flag: false
    };
  },
  activated() {
    this.getDistrictStoreList();
  },
  computed: {
    ...mapState({
      currentCity: "city"
    })
  },
  methods: {
    getDistrictStoreList() {
      //console.log(this.local);
      this.$http.get("/city.php").then(result => {
        if (result.body.status === 0) {
          this.storelist =
            result.body.district[this.currentCity][this.district][this.service];
          //console.log(this.storelist);
          //console.log(this.currentCity);
          //console.log(this.district);
          //console.log(this.service);
          if (this.storelist.length === 0) {
            this.flag = true;
          } else {
            this.flag = false;
          }
        }
      });
    }
  },
  props: ["local", "services"],
  watch: {
    //动态监听父组件传递过来的数组变化 从而重新给组件赋值和执行 getDistrictStoreList 方法
    local: {
      handler(newValue, oldValue) {
        this.district = newValue;
        //console.log(this.district);
        this.getDistrictStoreList();
        // console.log(newValue);
        // console.log(this.district);
      }
    },
    services: {
      handler(newValue, oldValue) {
        this.service = newValue;
        //console.log(this.service);
        this.getDistrictStoreList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0;
  padding: 0;
  margin: 0;
}
.storelist {
  display: flex;
  flex-direction: column;
  height: 100%;
  .storelistcotainer {
    flex: 1 1;
    //height: 511px;
    overflow: scroll;
    background-color: #fff;
    .storelist-item {
      display: flex;
      padding: 16px;
      .left {
        img {
          width: 77px;
          height: 57.5px;
        }
      }
      .right {
        width: 250px;
        margin-left: 16px;
        position: relative;
        h1 {
          font-size: 16px;
          height: 16px;
          color: #333333;
          margin-bottom: 8px;
        }
        span,
        h4 {
          font-size: 11px;
          color: #999999;
        }
        span {
          display: inline-block;
        }
        h4 {
          margin: 10px 0 12px 0;
          height: 11px;
          font-weight: normal;
        }
        img {
          margin-right: 4px;
        }
        h3 {
          font-size: 12px;
          color: #333333;
          font-weight: normal;
        }
        .juli {
          //display: flex;
          font-size: 12px;
          //line-height: 12px;
          position: absolute;
          right: 0;
          top: 41px;
          color: #333333;
        }
      }
    }
  }
  .storelistcotainer-nodata {
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 511px;
    img {
      width: 122.5px;
      height: 124px;
    }
    p {
      display: block;
      font-size: 12px;
      line-height: 12px;
      margin-top: 26.5px;
    }
  }
}
</style>